<template>
  <div id="app">
    <div class="head">
      <img
        class="top_head"
        src="../src/assets/imges/top3.png"
        alt=""
      >
    </div>
    <div class="nav_list">
      <div class="nav_item w">
        <router-link
          @click.native="handNav(item.id)"
          :class="[{'nav_item_active':$route.name==item.url},'item']"
          v-for="item in navList"
          :key="item.id"
          :to="{name: item.url, query: {id:item.id,count:count}}"
        >
          {{item.name}}</router-link>
      </div>
      <router-view></router-view>

      <div>
        <footers></footers>
      </div>
    </div>

  </div>
</template>
<script>
import footers from "./components/footer";
export default {
  components: {
    footers
  },
  data() {
    return {
      count: "",
      active: "0",
      navList: [],
      urlNavList: [
        {
          name: "首页",
          id: 0,
          url: "home"
        },
        {
          name: "企业简介",
          id: 1,
          url: "brief"
        },
        {
          name: "公交新闻",
          id: 2,
          url: "news"
        },
        {
          name: "乘车指南",
          id: 3,
          url: "guide"
        },
        {
          name: "企业党建",
          id: 4,
          url: "party"
        },
        {
          name: "工会之窗",
          id: 5,
          url: "window"
        },
        {
          name: "在线投诉",
          id: 6,
          url: "complaint"
        },
        {
          name: "路线查询",
          id: 7,
          url: "paths"
        }
      ]
    };
  },
  mounted() {
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });
  },
  watch: {},
  created() {
    this.$api.getPermissionsAll().then(res => {
      this.count = res.data.count;
      this.navList = res.data.data;
      this.navList.forEach((item, index) => {
        item.url = this.urlNavList[index + 1].url;
      });
      this.navList.unshift({
        name: "首页",
        id: 0,
        url: "home"
      });
    });
  },
  methods: {
    handNav(id) {
      this.$store.commit("handBus", false);
      this.active = id;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style lang="scss">
.nav_item_active {
  background: rgba(0, 102, 188, 1);
}
.nav_list {
  min-width: 1200px;
  .nav_item {
    display: flex;
    height: 100%;
    .item {
      display: block;
      color: #fff;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 34px;
      font-size: 20px;
      cursor: pointer;
      width: 150px;
      height: 100%;
      line-height: 70px;
      text-align: center;
    }
  }
  width: 100%;
  height: 70px;
  background: linear-gradient(
    180deg,
    rgba(34, 189, 243, 1) 0%,
    rgba(17, 121, 186, 1) 100%
  );
}
.top_head {
  // height: 203px;
  width: 100%;
}
.head {
  // height: 203px;
  width: 100%;
  min-width: 1200px;
}
html {
  background: #fff;
}
</style>
